﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Page</title>
    <style type="text/css">
        .product_item {
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            width: 100%;
        }

        .product_item1 {
            float: left;
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            width: 100%;
            background-color: grey;
        }

        .padingtop {
            padding-bottom: 1px;
            cursor: pointer;
        }

        .floatright {
            float: left;
            padding-right: 20px;
        }

        .div_FLeft {
            float: left;
        }

        .div_margin_left8 {
            margin-left: 8px;
        }

        .product_result_num {
            padding-top: 1px;
            float: left;
            margin-left: 8px;
            width: 15px;
            text-align: center;
            color: #1170a6;
            cursor: pointer;
        }

        .product_result_num1 {
            padding-top: 1px;
            float: left;
            margin-left: 8px;
            border: 1px solid #cccccc;
            background-color: #1170a6;
            width: 15px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

        .div_FRight {
            float: right;
        }

        .div_padding_right {
            padding-right: 28px;
        }

        #info {
            float: right;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .body_content {
            width: 960px;
            margin-left: auto;
            margin-right: auto;
        }

        .recordsinfo {
            float: left;
            padding-top: 5px;
            padding-left: 5px;
        }

        .div_FLeft2 {
            float: left;
            background-color: grey;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <div class="body_content">
        <div id="my_product_paging" style="padding-top: 10px;">
            <div id="content"></div>
            <div style="float: left; width: 100%">
                <div style="float: left; width: 20%">
                    <div style="float: left; padding-top: 4px;" id="Records">
                        <select name="example_length" id="recordsSelect" size="1">
                            <option selected="selected" value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>

                    </div>
                    <div class="recordsinfo">Records per page</div>
                </div>
                <div id="info"></div>
            </div>
        </div>
    </div>
    <input type="hidden" id="records" />
</body>
</html>
<script type="text/javascript">
    var pagingMgr = function (data, pageSize, renderData, containerid) {
        this._data = data;
        this._pageSize = pageSize;

        this._result = {};
        this._count = 0;

        this.GetResult = function () {
            if (this._data == null || this._data.length == 0) {
                return;
            }
            var _index = 0;

            for (var i = 0, ci; ci = this._data[i]; i++) {
                if (!this._result[_index]) {
                    this._result[_index] = [ci];
                }
                else {
                    var _len = this._result[_index].length;
                    if (_len == this._pageSize) {
                        _index++;
                        this._result[_index] = [ci]
                    }
                    else {
                        this._result[_index].push(ci);
                    }
                }
            }
            this._count = _index;
        }

        this.RenderPaging = function (container) {
            if (this._data == null || this._data.length == 0) {
                return;
            }
            $(container).html("");
            var html = "";
            if (this._data.length >= this._pageSize) {
                html += "<div class='floatright'>Records <span id='" + containerid + "_span_databegin'>" + 1 + "</span> to <span id='" + containerid + "_span_dataend'>" + this._pageSize + "</span> of " + this._data.length + "</div>";
            }
            else {
                html += "<div class='floatright'>Records <span id='" + containerid + "_span_databegin'>" + 1 + "</span> to <span id='" + containerid + "span_dataend'>" + this._data.length + "</span> of " + this._data.length + "</div>";
            }

            html += "<div class='div_FRight div_padding_right'>";

            if (this._count >= 5) {
                html += "<div class='div_FLeft div_margin_left padingtop'>";
                html += "<img src='Images/arrove_left.png' tag='prev_img' /></div>";

                for (var i = 0; i < 5; i++) {
                    if (i == 0) {
                        html += "<div class='product_result_num1' index='" + i + "' tag='page'>" + (i + 1) + "</div>";
                    }
                    else {
                        html += "<div class='product_result_num' index='" + i + "' tag='page'>" + (i + 1) + "</div>";
                    }
                }

                html += "<div class='div_FLeft div_margin_left8 padingtop'>";
                html += "<img src='Images/arrow_right.png' tag='next_img'/></div>";
            }
            else {
                for (var i = 0; i < this._count + 1; i++) {
                    if (i == 0) {
                        html += "<div class='product_result_num1' index='" + i + "' tag='page'>" + (i + 1) + "</div>";
                    }
                    else {
                        html += "<div class='product_result_num' index='" + i + "' tag='page'>" + (i + 1) + "</div>";
                    }
                }
            }
            html += "</div>";

            $(container).append($(html));
            var that = this;
            $(container).find("img[tag=prev_img]").each(function () {
                this.addEventListener("click", function () { that.RegPrevEvent(this); }, false);
            })
            $(container).find("img[tag=next_img]").each(function () {
                this.addEventListener("click", function () { that.RegNextEvent(this); }, false);
            })
            $(container).find("div[tag=page]").each(function () {
                this.addEventListener("click", function () { that.RegPageEvent(this); }, false);
            })

        }

        this.SetResultList = function (index) {
            $("#" + containerid + "_span_databegin").text(parseInt(index) * this._pageSize - (this._pageSize - 1));
            $("#" + containerid + "_span_dataend").text(parseInt($("#" + containerid + "_span_databegin").text()) + (this._pageSize - 1));
            if ($("#" + containerid + "_span_dataend").text() > this._data.length) {
                $("#" + containerid + "_span_dataend").text(this._data.length);
            }
        }

        this.RegPrevEvent = function (obj) {
            $(obj).parent().parent().find("div[tag=page]").each(function () {
                $(this).removeAttr("disabled");
            })

            var pageObj = $(obj).parent().parent().find("div[tag=page][class=product_result_num1]");
            var index = parseInt(pageObj.attr("index"));
            var html = parseInt(pageObj.html());
            //first page
            if (index == "0") {
                return;
            }

            pageObj.attr("class", "product_result_num");

            if (parseInt(index) % 5 == 0) {
                $(obj).parent().parent().find("div[tag=page]").each(function (j) {
                    var _h = html - 5 + j;
                    var _i = index - 5 + j;
                    if (j == 4) {
                        $(this).attr("class", "product_result_num1").html(_h).attr("index", _i);
                    }
                    else {
                        $(this).attr("class", "product_result_num").html(_h).attr("index", _i);
                    }
                })
            } else {
                pageObj.prev().attr("class", "product_result_num1");
            }


            renderData(this._result[parseInt(index) - 1]);

            index = parseInt(index) - 1;
            this.SetResultList(parseInt(index) + 1);

        }

        this.RegNextEvent = function (obj) {

            $(obj).parent().parent().find("div[tag=page]").each(function () {
                $(this).removeAttr("disabled");
            })

            var pageObj = $(obj).parent().parent().find("div[tag=page][class=product_result_num1]");
            var index = parseInt(pageObj.attr("index"));
            var html = parseInt(pageObj.html());
            if (parseInt(index) == this._count) {
                return;
            }
            var that = this;

            pageObj.attr("class", "product_result_num");

            if ((parseInt(index) + 1) % 5 == 0) {
                $(obj).parent().parent().find("div[tag=page]").each(function (j) {
                    var _h = html + 1 + j;
                    var _i = index + 1 + j;
                    if (_i > that._count) {
                        $(this).attr("class", "product_result_num").html("").attr("disabled", "disabled").attr("index", "none");
                        //$(this).remove();
                    }
                    else {
                        if (j == 0) {
                            $(this).attr("class", "product_result_num1").html(_h).attr("index", _i);
                        }
                        else {
                            $(this).attr("class", "product_result_num").html(_h).attr("index", _i);
                        }
                    }
                })
            } else {
                if (pageObj.next().attr("index") == "none") {

                } else {
                    pageObj.next().attr("class", "product_result_num1");
                }
            }

            renderData(this._result[parseInt(index) + 1]);

            index = parseInt(index) + 1;
            this.SetResultList(parseInt(index) + 1);
        }

        this.RegPageEvent = function (obj) {
            var obj = $(obj);
            if (obj.attr("index") != "none") {
                obj.parent().parent().parent().find("div[tag=page]").each(function () {
                    if (obj.attr("index") == $(this).attr("index")) {
                        $(this).attr("class", "product_result_num1");
                    }
                    else {
                        $(this).attr("class", "product_result_num");
                    }
                })
                var that = this;
                var _index = parseInt($(obj).attr("index"));
                renderData(that._result[_index]);

                var index = obj.attr("index");
                this.SetResultList(parseInt(index) + 1);
            }
        }
    }

    function RenderMyProList(data) {
        if (data == undefined || data == null || data.length == 0) {
            $("#content").html("");
            $("#my_product_paging").css("display", "none");
            return;
        }
        $("#my_product_paging").css("display", "block");
        $("#MyProInfo").html("");
        $("#content").html("");
        var appendHtml = "";
        appendHtml += "<div class='product_item'>";
        appendHtml += "<div style='width: 10%;' class='div_FLeft'><a id='search_pro_checkAll' href='javascript:void(0);'>Select all</a></div>";
        appendHtml += "<div style='width: 40%;' class='div_FLeft'>Address</div>";
        appendHtml += "<div style='width: 25%;' class='div_FLeft'>City</div>";
        appendHtml += "<div style='width: 20%;' class='div_FLeft'>Fax</div>";
        appendHtml += "</div>";

        for (var i = 0; i < data.length; i++) {
            if (i % 2 == 0) {
                appendHtml += "<div class='product_item'>";
            } else {
                appendHtml += "<div class='product_item1'>";
            }

            appendHtml += "<div style='width: 10%;' class='div_FLeft'><input type='checkbox' Pro_id =" + data[i].CustomerID + " tag='searchChooseOne'/></div>";
            appendHtml += "<div style='width: 40%;' class='div_FLeft'>" + data[i].Address + "</div>";
            appendHtml += "<div style='width: 25%;' class='div_FLeft'>" + data[i].City + "</div>";
            appendHtml += "<div style='width: 20%;' class='div_FLeft'>" + data[i].Fax + "</div>";

            appendHtml += "<div class='DOptionsMyProducts_item_png'>";

            if (i % 2 == 0) {
                appendHtml += "<img Pro_id ='" + data[i].CustomerID + "' tag='delImg' src='Images/close.png' />";
            } else {
                appendHtml += "<img Pro_id ='" + data[i].CustomerID + "' tag='delImg' src='Images/close2.png' />";
            }

            //appendHtml += "<img Pro_id ='" + data[i].CustomerID + "' tag='delImg' src='../Images/close.png' />";
            appendHtml += "</div>";

            //appendHtml += "</div>";
            appendHtml += "</div>";
        }

        $("#content").append($(appendHtml));
        document.getElementById("search_pro_checkAll").addEventListener("click", CheckAllSearchPro, false);
        $("#my_product_paging img[tag=delImg]").each(function () {
            this.addEventListener("click", function () { delMyPro(this); }, false);
        });
    }
    function CheckAllSearchPro() {
        var i = 0;
        $("#content input[type=checkbox][tag=searchChooseOne]").each(function () {
            if (this.checked) {
                i++;
            }
        });
        if ($("#content input[type=checkbox][tag=searchChooseOne]").length == i) {
            $("#content input[type=checkbox][tag=searchChooseOne]").each(function () {
                this.checked = false;
            })
        } else {
            $("#content input[type=checkbox][tag=searchChooseOne]").each(function () {
                this.checked = true;
            })
        }
    }


    var data = Array();
    for (var i = 0; i < 200; i++) {
        data.push({ Address: "Address" + i, City: "City" + i, Fax: "Fax" + i, CustomerID: i });
    }
    var url = '@Url.Action("Data", "Paging")';
    url += "?t=" + Math.random();

    $(function () {
        $("#records").val("10");
        getData();
        $("#recordsSelect").change(function () {
            var _t = $(this).val();
            $("#records").val(_t);
            getData();
        })
    })

    function getData() {
        count = $("#records").val();
        var _r = new pagingMgr(data, count, RenderMyProList, "my_product_paging");
        _r.GetResult();
        _r.RenderPaging($("#info"));
        RenderMyProList(_r._result[0]);

    }
    function DelArrItem(arr, pid) {
        var _d = new Array();
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].CustomerID != pid) {
                _d.push(arr[i]);
            }
        }
        return _d;
    }
    function delMyPro(obj) {
        if (window.confirm("Are you sure you want to delete this product?")) {
            var that = obj;
            data = DelArrItem(data, $(obj).attr("Pro_id"));
        }
        getData();
    }

</script>
